<div id="test-score-list-dom">
    <p></p>
    <div>
        <form class="form-inline">
            <div class="form-group">
                <label for="score-list-InputName1">测评成绩名称</label>
                <input type="text" v-model="search.scoreName" class="form-control" id="score-list-InputName1">
            </div>
            <div class="form-group">
                <label for="score-list-InputName2">学员编号</label>
                <input type="text" v-model="search.studentNo" class="form-control" id="score-list-InputName2">
            </div>
            <div class="form-group">
                <label for="score-list-InputName3">学员名称</label>
                <input type="text" v-model="search.studentName" class="form-control" id="score-list-InputName3">
            </div>
            <div class="form-group">
                <label for="score-list-InputName4">添加时间</label>
                <input type="text" v-model="search.timeStart" class="form-control" id="score-list-InputName4"> ~
                <input type="text" v-model="search.timeEnd" class="form-control" id="score-list-InputName41">
            </div>
            <div class="form-group">
                <label for="score-list-InputName5">成绩范围</label>
                <input type="text" v-model="search.scoreStart" class="form-control" id="score-list-InputName5"> ~
                <input type="text" v-model="search.scoreEnd" class="form-control" id="score-list-InputName51">
            </div>
            <div class="form-group">
                <label for="score-list-InputName6">成绩</label>
                <input type="text" v-model="search.score" class="form-control" id="score-list-InputName6">
            </div>
            <div class="form-group">
                <label for="score-list-InputName7">状态</label>
                <select v-model="search.scoreStatus" class="form-control" id="score-list-InputName7"> ~
                    <option value="0">全部</option>
                    <option value="1">正常</option>
                    <option value="2">禁用</option>
                </select>
            </div>
            <input type="button" @click="doPage(1)" class="btn btn-default" value="查询" />
            <input type="button" @click="addScore" class="btn btn-default" value="新增测评成绩" />
        </form>
    </div>
    <p></p>
    <div>
        <div class="table-responsive">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>测评成绩名称</th>
                        <th>学员编号</th>
                        <th>学员名称</th>
                        <th>创建时间</th>
                        <th>成绩</th>
                        <th>状态</th>
                        <th>&nbsp;
                            <!-- 查看详情，编辑，删除 -->
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="s in pageInfo.data">
                        <td>{{s.scoreId}}</td>
                        <td>{{s.scoreName}}</td>
                        <td>{{s.student.studentNo}}</td>
                        <td>{{s.student.studentName}}</td>
                        <td>{{formattime(s.createTime)}}</td>
                        <td>{{s.score}}</td>
                        <td>{{s.templateStatus==1?'正常':'禁用'}}</td>
                        <td>
                            <a href="" @click.prevent="detail(s.scoreId)">查看详情</a> /
                            <a href="" @click.prevent="editScore(s.scoreId)">编辑</a> /
                            <a href="" @click.prevent="deleteScore(s.scoreId)">删除</a> /
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div>
            <page-bar :page="pageInfo.page" :start="pageInfo.pageStart" :end="pageInfo.pageEnd"
                :max-page-num="pageInfo.maxPageNum" @do-page="doPage($event)"></page-bar>
        </div>
    </div>
</div>
<script>
    let testScoreListApp = Vue.createApp({
        data() {
            return {
                pageInfo: {},
                search: {
                    page: 1,
                    row: 10,
                    timeStart: "",
                    timeEnd: "",
                    templateId: '',
                    scoreName: "",
                    templateId: 0,
                    studentNo: "",
                    studentName: "",
                    scoreStart: 0,
                    scoreEnd: 0,
                    score: 0,
                    scoreStatus: 0,
                }
            }
        }, methods: {
            addScore() {
                showOrCheckTab("新增测评成绩", "test-score-add.html");
            },
            editScore(sid) {
                // 将tid设置为window的属性
                // window.editTemplateId = tid;
                // showOrCheckTab("编辑模版","template-edit.html?templateId="+tid);
            }, deleteScore(sid) {

            }, detail(sid) {
                window.scoreId=sid
                showOrCheckTab("测评成绩详情","score-detail.html");
            },
            formattime(time) {
                var d = new Date(time);
                let str = d.getFullYear() + "年" + (d.getMonth() + 1) + "月" + d.getDate() + "日 " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
                return str;
            }, doPage(pageNum) {
                this.search.page = pageNum;
                queryTestScore(this);
            }
        }, mounted() {
            //查询数据
            queryTestScore(this);
        }
    });
    //分页组件
    testScoreListApp.component("page-bar", {
        props: ["page", "start", "end", "maxPageNum"],// [当前页码，开始页码，结束页码]
        emits: ["doPage"],// 每个按钮上的事件
        template: `
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <li>
                        <a href="#" @click.prevent="$emit('do-page',page-1)" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                        </li>
                        <li :class="{active:n==page}" v-for="n in (end-start+1)"><a href="#" @click.prevent="$emit('do-page',$event.target.text)">{{n+start-1}}</a></li>
                        <li>
                        <a href="#" @click.prevent="$emit('do-page',page+1)" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                        </li>
                    </ul>
                </nav>
                `
    });
    testScoreListApp.mount("#test-score-list-dom")

    function queryTestScore(_this) {
        axios.post("http://localhost:8080/testScore/query", _this.search)
            .then((res) => {
                _this.pageInfo = res.data.data
            });
    }

</script>